<template>
    <Overlay
        class="overlay"
        :show="show"
        class-name="grid place-items-center bg-transparent  relative"
        :z-index="2002"
    >
        <div
            class="absolute h-full w-full bg-transparent backdrop-blur-xs -z-10"
            @pointerdown.self="$emit('close')"
        ></div>
        <div class="h-1/2 w-1/2 relative rounded-3xl overflow-hidden" :class="class">
            <div class="absolute top-0 left-0 h-full w-full roundBlurCard backdrop-blur-lg -z-10"></div>

            <slot></slot>
        </div>
    </Overlay>
</template>

<style scoped>
.roundBlurCard {
    background-image: radial-gradient(transparent, #ffffff55, #ffffffaa);
}
.overlay {
    --van-overlay-background-color: transparent;
}
</style>

<script lang="ts" setup>
import { Overlay } from 'vant';

defineProps<{ show: boolean, class?: string }>()
defineEmits<{
    (event: 'close'): void
}>()
</script>